import React from 'react';
import { Task, Alert } from '../types';
import { Clock, AlertTriangle, CheckCircle, XCircle, Loader } from 'lucide-react';

interface SidebarProps {
  tasks: Task[];
  alerts: Alert[];
  searchTerm: string;
}

export const Sidebar: React.FC<SidebarProps> = ({ tasks, alerts, searchTerm }) => {
  const getStatusIcon = (status: Task['status']) => {
    switch (status) {
      case 'queued':
        return <Clock size={14} className="text-text-secondary" />;
      case 'running':
        return <Loader size={14} className="text-accent-blue animate-spin" />;
      case 'completed':
        return <CheckCircle size={14} className="text-success-green" />;
      case 'failed':
        return <XCircle size={14} className="text-error-red" />;
    }
  };

  const getStatusColor = (status: Task['status']) => {
    switch (status) {
      case 'queued':
        return 'text-text-secondary';
      case 'running':
        return 'text-accent-blue';
      case 'completed':
        return 'text-success-green';
      case 'failed':
        return 'text-error-red';
    }
  };

  const getSeverityColor = (severity: Alert['severity']) => {
    switch (severity) {
      case 'low':
        return 'bg-blue-500';
      case 'medium':
        return 'bg-yellow-500';
      case 'high':
        return 'bg-orange-500';
      case 'critical':
        return 'bg-red-500';
    }
  };

  const filteredTasks = tasks.filter(task =>
    task.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
    task.targetCluster.toLowerCase().includes(searchTerm.toLowerCase())
  );

  return (
    <aside className="w-[300px] glass-effect border-r border-border-color flex flex-col">
      <div className="p-4 border-b border-border-color">
        <h2 className="text-lg font-semibold text-text-primary">任务管理</h2>
      </div>

      <div className="flex-1 overflow-y-auto custom-scrollbar">
        <div className="p-4">
          <h3 className="text-sm font-medium text-text-secondary mb-3">监控任务</h3>
          <div className="space-y-3">
            {filteredTasks.map((task) => (
              <div
                key={task.id}
                className="p-3 bg-secondary-bg/50 rounded-lg border border-border-color hover:border-accent-blue transition-all cursor-pointer"
              >
                <div className="flex items-center justify-between mb-2">
                  <div className="flex items-center gap-2">
                    {getStatusIcon(task.status)}
                    <span className="text-sm font-medium text-text-primary">
                      {task.name}
                    </span>
                  </div>
                  <span className={`text-xs ${getStatusColor(task.status)}`}>
                    {task.status}
                  </span>
                </div>
                <div className="text-xs text-text-secondary mb-2">
                  {task.targetCluster}
                </div>
                <div className="w-full bg-gray-700 rounded-full h-1.5">
                  <div
                    className="h-1.5 bg-gradient-to-r from-accent-blue to-success-green rounded-full transition-all duration-300"
                    style={{ width: `${task.progress}%` }}
                  />
                </div>
                <div className="text-xs text-text-secondary mt-1">
                  {task.progress}% 完成
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="p-4 border-t border-border-color">
          <h3 className="text-sm font-medium text-text-secondary mb-3 flex items-center gap-2">
            <AlertTriangle size={14} />
            异常告警
          </h3>
          <div className="space-y-2">
            {alerts.slice(0, 5).map((alert) => (
              <div
                key={alert.id}
                className="p-2 bg-secondary-bg/30 rounded border-l-4 border-accent-blue"
              >
                <div className="flex items-center gap-2 mb-1">
                  <div
                    className={`w-2 h-2 rounded-full ${getSeverityColor(alert.severity)}`}
                  />
                  <span className="text-xs text-text-secondary">
                    {new Date(alert.timestamp).toLocaleTimeString()}
                  </span>
                </div>
                <div className="text-xs text-text-primary mb-1">
                  {alert.source}
                </div>
                <div className="text-xs text-text-secondary">
                  {alert.message}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </aside>
  );
};